<template>
	<view class="my-userinfo-container">
		<view class="top-box">
			<image :src="userinfo.avatarUrl" class="avatar"></image>
			<view class="nickname">{{ userinfo.nickName }}</view>
		</view>
		<view class="my-userinfo-service">
			<uni-group mode="card">
				<text style="font-size: 13px;">我的服务</text>

				<uni-grid :column="4" :showBorder="false">
					<navigator url="/subpkg/my-infoset/my-infoset" hover-class="navigator-hover">
						<uni-grid-item>
							<view class="grid-item-box" style="background-color: #fff;">
								<uni-icons type="gear-filled" :size="30" color="#777" />
								<text class="text">个人资料</text>
							</view>
						</uni-grid-item>
					</navigator>
					<uni-grid-item>
						<view class="grid-item-box" style="background-color: #fff;">
							<uni-icons type="cart-filled" :size="30" color="#777" />
							<text class="text">我的订单</text>
						</view>
					</uni-grid-item>
					<navigator url="/subpkg/community/community" hover-class="navigator-hover">
						<uni-grid-item>
							<view class="grid-item-box" style="background-color: #fff;">
								<uni-icons type="pyq" :size="30" color="#777" />
								<text class="text">社区服务</text>
							</view>
						</uni-grid-item>
					</navigator>
					<navigator url="/subpkg/appointment-list/appointment-list" hover-class="navigator-hover">
						<uni-grid-item>
							<view class="grid-item-box" style="background-color: #fff;">
								<uni-icons type="calendar-filled" :size="30" color="#777" />
								<text class="text">预约记录</text>
							</view>
						</uni-grid-item>
					</navigator>
					<navigator url="/subpkg/favorite/favorite" hover-class="navigator-hover">
						<uni-grid-item>
							<view class="grid-item-box" style="background-color: #fff;">
								<uni-icons type="heart-filled" :size="28" color="#777" />
								<text class="text">收藏夹</text>
							</view>
						</uni-grid-item>
					</navigator>
				</uni-grid>
			</uni-group>
		</view>
		<view class="my-userinfo-set">
			<uni-group mode="card">
				<navigator url="/subpkg/address/address" hover-class="navigator-hover">
					<view class="card">
						<text>收货地址</text>
						<uni-icons type="right" size="15" class="card-icon"></uni-icons>
					</view>
				</navigator>
				<navigator url="/subpkg/service/service" hover-class="navigator-hover">
					<view class="card">
						<text>联系客服</text>
						<uni-icons type="right" size="15" class="card-icon"></uni-icons>
					</view>
				</navigator>
				<view class="card">
					<text>退出登录</text>
					<uni-icons type="right" size="15" class="card-icon"></uni-icons>
				</view>
			</uni-group>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	export default {
		name: "my-userinfo",
		computed: {
			// 从 m_user 模块中导入需要的对象
			...mapState('m_user', ['userinfo', 'token', 'userId']),
		},
		data() {
			return {};
		},
		created() {
			this.fetchUserInfo();
		},
		methods: {
			async fetchUserInfo() {
				if (!this.userId) {
					console.error('UserId 未定义，无法加载用户信息');
					return;
				}
				try {
					const res = await uni.$http.get(`/wx/userlist/${this.userId}`);
					//返回的数据可以直接合并到 userinfo 中
					this.$set(this.$store.state.m_user, 'userinfo', {
						...this.userinfo,
						...res.data.data
					});
				} catch (error) {
					console.error('查询用户信息时发生错误:', error);
				}
			},
		}
	};
</script>

<style lang="scss">
	.my-userinfo-container {
		height: 100%;
		// 为整个组件的结构添加浅灰色的背景
		background-color: #f4f4f4;

		.top-box {
			height: 400rpx;
			background-color: #6599c0;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.avatar {
				display: block;
				width: 80px;
				height: 80px;
				border-radius: 45px;
				border: 2px solid white;
				box-shadow: 0 1px 5px black;
			}

			.nickname {
				color: white;
				font-weight: bold;
				font-size: 16px;
				margin-top: 10px;
			}
		}
	}

	// .image {
	// 	width: 25px;
	// 	height: 25px;
	// }

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.my-userinfo-set .card {
		display: flex;
		align-items: center; // 垂直居中
		margin: 5px 0 20px 0;

		.card-icon {
			margin-left: auto; // 将图标推到右边
		}
	}
</style>